<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 卡片集合</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义样式 */
        .shadow-custom {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),   /* 原始 md 阴影 */
            0 -4px 6px -1px rgba(0, 0, 0, 0.05); /* 上方阴影 */
        }

        .shadow-card {
            box-shadow: inset 5px 5px 0px #c3c3c3,
            inset -5px -5px 0px #fdfdfd;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen p-8">
<div class="container mx-auto space-y-8">
    <!-- 基础卡片 -->
    <div class="max-w-md mx-auto">
        <!--
            基础卡片样式说明：
            - bg-white: 白色背景
            - rounded-lg: 中等圆角
            - shadow-md: 中等阴影
            - p-6: 内边距6个单位(1.5rem)
            - 简单的内容布局
        -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-xl font-semibold text-gray-800 mb-2">基础卡片</h3>
            <p class="text-gray-600">这是一个使用Tailwind CSS创建的基础卡片组件，包含标题和描述文本。</p>
        </div>
    </div>

    <!-- 不同圆角大小的卡片 -->
    <div class="grid md:grid-cols-4 gap-6">
        <!--
            圆角大小示例：
            Tailwind提供从none到full的圆角大小
            rounded-none(0), rounded-sm(0.125rem), rounded(0.25rem),
            rounded-md(0.375rem), rounded-lg(0.5rem),
            rounded-xl(0.75rem), rounded-2xl(1rem),
            rounded-3xl(1.5rem), rounded-full(9999px)
        -->
        <div class="bg-white shadow-md p-4 rounded-sm">
            <h4 class="font-medium text-gray-800 mb-1">小圆角 2.0px</h4>
            <p class="text-sm text-gray-500">rounded-sm</p>
        </div>
        <div class="bg-white shadow-md p-4 rounded">
            <h4 class="font-medium text-gray-800 mb-1">默认圆角 4.0px</h4>
            <p class="text-sm text-gray-500">rounded</p>
        </div>
        <div class="bg-white shadow-md p-4 rounded-md">
            <h4 class="font-medium text-gray-800 mb-1">中等圆角 6.0px</h4>
            <p class="text-sm text-gray-500">rounded-md</p>
        </div>
        <div class="bg-white shadow-md p-4 rounded-lg">
            <h4 class="font-medium text-gray-800 mb-1">大圆角 8.0px</h4>
            <p class="text-sm text-gray-500">rounded-lg</p>
        </div>
        <div class="bg-white shadow-md p-4 rounded-xl">
            <h4 class="font-medium text-gray-800 mb-1">大圆角 12.0px</h4>
            <p class="text-sm text-gray-500">rounded-xl</p>
        </div>
        <div class="bg-white shadow-md p-4 rounded-2xl">
            <h4 class="font-medium text-gray-800 mb-1">大圆角 16.0px</h4>
            <p class="text-sm text-gray-500">rounded-2xl</p>
        </div>
        <div class="bg-white shadow-md p-4 rounded-3xl">
            <h4 class="font-medium text-gray-800 mb-1">大圆角 24.0px</h4>
            <p class="text-sm text-gray-500">rounded-3xl</p>
        </div>
        <div class="bg-white shadow-md p-4 rounded-full">
            <h4 class="font-medium text-gray-800 mb-1">全圆角</h4>
            <p class="text-sm text-gray-500">rounded-full</p>
        </div>
    </div>

    <!-- 不同阴影大小的卡片 -->
    <div class="grid md:grid-cols-5 gap-6">
        <!--
            阴影大小示例：
            shadow-sm(小), shadow(中), shadow-md(中大),
            shadow-lg(大), shadow-xl(超大)
            还有shadow-inner(内阴影)和shadow-none(无阴影)
        -->
        <div class="bg-white rounded-lg p-4 shadow-sm">
            <h4 class="font-medium text-gray-800 mb-1">小阴影</h4>
            <p class="text-sm text-gray-500">shadow-sm</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow">
            <h4 class="font-medium text-gray-800 mb-1">默认阴影</h4>
            <p class="text-sm text-gray-500">shadow</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-md">
            <h4 class="font-medium text-gray-800 mb-1">中等阴影</h4>
            <p class="text-sm text-gray-500">shadow-md</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-lg">
            <h4 class="font-medium text-gray-800 mb-1">大阴影</h4>
            <p class="text-sm text-gray-500">shadow-lg</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-xl">
            <h4 class="font-medium text-gray-800 mb-1">超大阴影</h4>
            <p class="text-sm text-gray-500">shadow-xl</p>
        </div>

        <div class="bg-white rounded-lg p-4 shadow-custom">
            <h4 class="font-medium text-gray-800 mb-1">超大阴影</h4>
            <p class="text-sm text-gray-500">shadow-xl</p>
        </div>
    </div>

    <!-- 数据展示卡片 -->
    <div class="grid md:grid-cols-4 gap-6">
        <!--
            数据卡片说明：
            - 专注于展示关键数据
            - 大字号突出数字
            - 小字号说明标签
            - 可添加趋势指示(如上箭头)
        -->
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <div class="text-3xl font-bold text-blue-600 mb-1">1,234</div>
            <div class="text-sm text-gray-500 uppercase tracking-wider">总用户</div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 text-center">
            <div class="flex items-center justify-center">
                <div class="text-3xl font-bold text-green-600 mb-1">568</div>
                <svg class="w-6 h-6 text-green-500 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
                </svg>
            </div>
            <div class="text-sm text-gray-500 uppercase tracking-wider">新增用户</div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 text-center">
            <div class="flex items-center justify-center">
                <div class="text-3xl font-bold text-red-600 mb-1">23%</div>
                <svg class="w-6 h-6 text-red-500 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                </svg>
            </div>
            <div class="text-sm text-gray-500 uppercase tracking-wider">跳出率</div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 text-center">
            <div class="text-3xl font-bold text-purple-600 mb-1">4.8</div>
            <div class="flex justify-center items-center">
                <div class="text-sm text-gray-500 uppercase tracking-wider mr-1">评分</div>
                <div class="flex">
                    <!-- 五星评分 -->
                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- 带图标的卡片 -->
    <div class="grid md:grid-cols-3 gap-6">
        <!--
            带图标卡片说明：
            - 使用flex布局
            - 图标容器有背景色和圆角
            - 内容区域flex-1自动填充
        -->
        <div class="bg-white rounded-lg shadow-md p-6 flex items-start">
            <div class="bg-blue-100 p-3 rounded-full mr-4">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 mb-1">快速性能</h3>
                <p class="text-gray-600">我们的系统经过优化，提供闪电般的响应速度。</p>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6 flex items-start">
            <div class="bg-green-100 p-3 rounded-full mr-4">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 mb-1">高可靠性</h3>
                <p class="text-gray-600">99.9%的正常运行时间保证，让您无后顾之忧。</p>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6 flex items-start">
            <div class="bg-purple-100 p-3 rounded-full mr-4">
                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 mb-1">安全保障</h3>
                <p class="text-gray-600">多层安全防护，确保您的数据安全无忧。</p>
            </div>
        </div>
    </div>

    <!-- 添加插入阴影(Adding an inset shadow) -->
    <div class="grid md:grid-cols-5 gap-6">
        <div class="size-24 rounded-lg bg-white ring-1 inset-shadow-2xs ring-black/5">

        </div>
        <div class="size-24 rounded-lg bg-white ring-1 inset-shadow-xs ring-black/5"></div>
        <div class="size-24 rounded-lg bg-white ring-1 inset-shadow-sm ring-black/5"></div>

        <div class="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500"></div>
        <div class="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500/50"></div>

        <div class="bg-white p-4 bg-indigo-200 inset-shadow-indigo-500">
            <h4 class="font-medium text-gray-800 mb-1">全圆角</h4>
            <p class="text-sm text-gray-500">rounded-full</p>
        </div>
    </div>

    <!-- 用户资料卡片 -->
    <div class="grid md:grid-cols-2 gap-6">
        <!--
            用户资料卡片说明：
            - 顶部有封面图片
            - 圆形头像居中显示
            - 用户信息区域
            - 底部操作按钮
        -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600"></div>
            <div class="px-6 pb-6">
                <div class="flex justify-center -mt-8 mb-4">
                    <img src="https://source.unsplash.com/random/200x200/?portrait"
                         alt="用户头像"
                         class="w-16 h-16 rounded-full border-4 border-white shadow">
                </div>
                <div class="text-center">
                    <h3 class="text-xl font-semibold text-gray-800 mb-1">张三</h3>
                    <p class="text-sm text-gray-500 mb-4">前端开发工程师</p>
                    <p class="text-gray-600 mb-4">专注于React和Vue.js开发，热爱开源社区。</p>
                    <div class="flex justify-center space-x-3">
                        <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">关注</button>
                        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition">消息</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 横向用户卡片 -->
        <!--
            横向用户卡片说明：
            - flex布局
            - 左侧头像
            - 右侧内容区域
            - 底部对齐的操作按钮
        -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden flex">
            <img src="https://source.unsplash.com/random/200x200/?woman"
                 alt="用户头像"
                 class="w-24 h-full object-cover">
            <div class="flex-1 p-4 flex flex-col">
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">李四</h3>
                    <p class="text-sm text-gray-500 mb-2">UI/UX设计师</p>
                    <p class="text-gray-600 text-sm">专注于用户体验设计，擅长创建直观的界面。</p>
                </div>
                <div class="flex justify-end space-x-2">
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition">查看作品</button>
                    <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm hover:bg-blue-200 transition">联系</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 价格卡片 -->
    <div class="grid md:grid-cols-3 gap-6">
        <!--
            价格卡片说明：
            - 突出显示价格
            - 包含功能列表
            - 明显的行动按钮
            - 可添加推荐标记
        -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-1">基础版</h3>
                <p class="text-gray-600 mb-4">适合个人用户和小型项目</p>
                <div class="mb-6">
                    <span class="text-3xl font-bold text-gray-800">$9</span>
                    <span class="text-gray-500">/月</span>
                </div>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        10个项目
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        5GB存储空间
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        基本支持
                    </li>
                </ul>
                <button class="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition">选择计划</button>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-blue-500 relative">
            <!-- 推荐标记 -->
            <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-bl">推荐</div>
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-1">专业版</h3>
                <p class="text-gray-600 mb-4">适合中小型企业和团队</p>
                <div class="mb-6">
                    <span class="text-3xl font-bold text-gray-800">$29</span>
                    <span class="text-gray-500">/月</span>
                </div>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        无限项目
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        50GB存储空间
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        优先支持
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        团队协作
                    </li>
                </ul>
                <button class="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">选择计划</button>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-1">企业版</h3>
                <p class="text-gray-600 mb-4">适合大型企业和组织</p>
                <div class="mb-6">
                    <span class="text-3xl font-bold text-gray-800">$99</span>
                    <span class="text-gray-500">/月</span>
                </div>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        无限项目
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        无限存储空间
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        24/7专属支持
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        高级分析
                    </li>
                    <li class="flex items-center text-gray-600">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        SSO集成
                    </li>
                </ul>
                <button class="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition">联系我们</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>